<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>角色权限查询</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container { margin-top: 30px; }
        .result-card { margin-top: 20px; }
        .menu-item { margin: 5px 0; }
    </style>
</head>
<body>
<div class="container">
    <h2>任务二：查询角色及其拥有的所有菜单权限</h2>
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">首页</a></li>
            <li class="breadcrumb-item active" aria-current="page">角色权限查询</li>
        </ol>
    </nav>

    <!-- 查询表单 -->
    <div class="card">
        <div class="card-body">
            <form method="post" action="/role/queryWithMenus">
                <div class="mb-3">
                    <label for="roleId" class="form-label">角色ID</label>
                    <input type="number" class="form-control" id="roleId" name="roleId"
                           placeholder="请输入角色ID（如1、2，可选）">
                </div>
                <div class="mb-3">
                    <label for="roleKey" class="form-label">角色名称</label>
                    <input type="text" class="form-control" id="roleKey" name="roleKey"
                           placeholder="请输入角色名称（如管理员，可选）">
                </div>
                <div class="form-text mb-3">提示：请至少输入一个查询条件</div>
                <button type="submit" class="btn btn-success">查询</button>
            </form>
        </div>
    </div>

    <!-- 查询结果 -->
    <div th:if="${role != null}" class="result-card card">
        <!-- 角色信息 -->
        <div class="card-header bg-success text-white">
            <h5 class="mb-0">角色信息</h5>
        </div>
        <div class="card-body">
            <h5 class="card-title" th:text="${'角色ID：' + role.id}"></h5>
            <p class="card-text" th:text="${'角色名称：' + role.name}"></p>
            <p class="card-text" th:text="${'描述：' + (role.description != null ? role.description : '无描述')}"></p>
            <p class="card-text" th:text="${'状态：' + (role.status == 0 ? '正常' : '禁用')}"></p>
        </div>

        <!-- 菜单权限列表 -->
        <div class="card-header bg-secondary text-white">
            <h5 class="mb-0">拥有的菜单权限</h5>
        </div>
        <div class="card-body">
            <div th:if="${role.menus == null or role.menus.isEmpty()}">
                <p class="text-muted">该角色未分配任何菜单权限</p>
            </div>
            <div th:unless="${role.menus == null or role.menus.isEmpty()}">
                <div th:each="menu : ${role.menus}" class="menu-item">
                    <strong th:text="${menu.name}">菜单名称</strong>
                    <span th:if="${menu.url != null and menu.url != ''}" class="text-muted ms-2"
                          th:text="${'(' + menu.url + ')'}">(URL)</span>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>